<template>
  <div class="flex big">
    <div class="left">
          <iptaside @onsure="onsure" :form="form" />
    </div>
    <div class="right-big" v-show="this.$route.params.id!=='add'">
          <!-- 右上 -->
          <div class="right flex">
              <div class="right-new">
                  <div>渠道上新情况</div>
                  <div class="qudao">
                    <div class="flex newlist" v-for="(item,i) in groundNewList" :key="i">
                      <div style="width: 20%;">{{ item.channelName }}</div>
                      <div v-if="item.isGroundNew" style="width: 20%;">已上新</div>
                      <div v-else style="width: 20%;">未上新</div>
                      <div style="flex-grow: 1;">{{ parseDate(item.groundNewTime) }}</div>
                    </div>
                  </div>

              </div>
              <!-- 折线图 -->

              <LineChart class="line" :title="linetitle" :datalist="linedatalist" :datalist1="linedatalist1" :datalist2="linedatalist2" :showsupplier="false" :showgoods="false" @getinvent="getInventory"></LineChart>
          </div>
          <!-- 右下 -->
          <!-- 柱状图 -->
          <div class="right">
              <Histogram ref="Histogram" class="Histogram" :title="bartitle" :datalist="bardatalist" :showgoods="false" :showchannel="false" @getsales="getsales"></Histogram>
          </div>

    </div>
  </div>

</template>

<script>
import request from '@/utils/request'
import iptaside from './components/iptaside'
import LineChart from './components/LineChart'
import Histogram from './components/Histogram'
import {add,queryGroundNew,jstGoods} from '@/api/erp/jstGoods'
// import { getToken } from "@/utils/auth";
export default {
    name:'jstGoodsDetail',
    components:{iptaside,LineChart,Histogram},
    data() {
        return {
            linetitle:'库存信息',
            bartitle:'产品销售',
            linedatalist: [],
            linedatalist1: [],
            linedatalist2: [],
            bardatalist:[150, 232, 201, 154, 190, 130,150, 232, 201, 154, 190, 230,150, 232, 201, 154, 190, 130,150, 232, 201, 154, 190, 30,150, 232, 201, 154, 190, 230,],
            form:{},
            groundNewList:[],
        }
    },
    created() {
      this.init()

    },
    methods: {
      init(){
        if (this.$route.params.id==="add") {
        this.form={
          code: "",
          color: "",
          costPrice1: 0,
          costPrice2: 0,
          costPrice3: 0,
          createTime: "",
          createUserCode: "",
          createUserId: 0,
          createUserName: "",
          firstBulk: "",
          height: 0,
          id: 0,
          imageUrl: "",
          length: 0,
          level: "",
          material: "",
          merCode: "",
          model: "",
          name: "",
          photoHighlight: "",
          photoSample: "",
          remark: "",
          seq: 0,
          size: "",
          skuId: "",
          status: 1,
          supplierName: "",
          type: "",
          updateTime: "",
          updateUserCode: "",
          updateUserId: 0,
          updateUserName: "",
          width: 0
        }
      }else{
        this.getNew()
        const config={
          url: 'api/jstGoods',
          methods: 'get',
          params: {
            size:9999,
            page:1,
            id:this.$route.params.id
          }
        }
        request(config).then(res=>{
          this.form=res.data.content[0]
          // this.form.type=this.form.type>>0
          // this.form.imageUrl=JSON.parse(this.form.imageUrl)
          console.log('不是新增',res);
        })

      }
      },
      onsure(val){
        if (this.$route.params.id!=="add"){
          val.id=this.$route.params.id
        }
          add(val).then(res=>{
            if (res.status === 200){
              this.init()
              let id=res.data.id
              this.$router.replace('/jst/jstGoodsDetail/'+id)
              this.$message.success(res.msg)
            }else{
              this.$message.success(res.msg)
            }
            // val.imageUrl=JSON.parse(val.imageUrl)
        }).catch((err)=>{
          this.$message.success(err.msg)
          val.imageUrl=JSON.parse(val.imageUrl)
        })

      },
      getInventory(data){
        if (!data) {
          data={}
        }
        let a={
          goodsIds:this.$route.params.id,
        }
        data=Object.assign(data,a)
        const config={
          url: 'api/jstGoods/queryInventory',
          methods: 'get',
          params: data
        }
        request(config).then(res=>{
          this.linedatalist=[]
          this.linedatalist1=[]
          this.linedatalist2=[]
          for (const key in res.data.content[0]) {
            var fdStart = key.indexOf( "usableQty" );
            let u=/^usableQty.*/
            if(u.test(key)){
              this.linedatalist.push(res.data.content[0][key])
            }else{
              this.linedatalist1.push(res.data.content[0][key])
            }
          }
          if (this.linedatalist && this.linedatalist1) {
            this.linedatalist.forEach((_,i)=>{
              return this.linedatalist2.push(this.linedatalist[i]+this.linedatalist1[i])
            })
          }
        })
      },
      getsales(data){
        if (!data) {
          data={}
        }
        let a={
          goodsIds:this.$route.params.id,
          resultType:'goods'
        }
        data=Object.assign(data,a)
        const config={
          url: 'api/jstGoods/querySale',
          methods: 'get',
          params: data
        }
        request(config).then(res=>{
          // 对象转数组
          if (!res.data.content.length) {
            this.bardatalist=[]
          }else{
            this.bardatalist=Object.values(res.data.content[0])
          }
        })
      },
      getNew(){
        const config={
          url: 'api/jstGoods/queryGroundNew',
          methods: 'get',
          params: {
            page: 0,
            size: 999999,
            id:this.$route.params.id
          }
        }
        request(config).then(res=>{
          this.groundNewList=res.data.content[0].groundNewList
        })
      },
      parseDate(time, cFormat) {
        console.log('time',time)
        if (arguments.length === 0) {
          return null
        }
        const format = cFormat || '{y}-{m}-{d}'
        let date
        if (typeof time === 'undefined' || time === null || time === 'null') {
          return ''
        } else if (typeof time === 'object') {
          date = time
        } else {
          if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
            time = parseInt(time)
          }
          if ((typeof time === 'number') && (time.toString().length === 10)) {
            time = time * 1000
          }
          date = new Date(time)
          console.log('date',date)
        }
        const formatObj = {
          y: date.getFullYear(),
          m: date.getMonth() + 1,
          d: date.getDate(),
          h: date.getHours(),
          i: date.getMinutes(),
          s: date.getSeconds(),
          a: date.getDay()
        }
        const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
          let value = formatObj[key]
          // Note: getDay() returns 0 on Sunday
          if (key === 'a') {
            return ['日', '一', '二', '三', '四', '五', '六'][value]
          }
          if (result.length > 0 && value < 10) {
            value = '0' + value
          }
          return value || 0
        })
        return time_str
      },
    },

}
</script>

<style lang="scss" scoped>
    .right{
      width: 100%;
      height: 50%;
      margin: 0 1% 1%;
        .right-new{
            width: 25%;
            height: 100%;
            background-color: white;
            margin-right: 10px;
            padding: 10px;
            .qudao{
              margin-top: 10px;
              height: 90%;
              overflow-y: scroll;
              .newlist{
                margin: 5px 0;
              }
            }
        }
        .line{
            width: 75%;
            height: 100%;
            flex-shrink: 0;
            background-color: white;
        }
        .Histogram{
          width: 100%;
          height: 100%;
          background-color: white;
          padding-top: 5px;
        }
    }
    .big{
      width: 100%;
      height: 100%;
      background-color: #f8f8f8;
      padding: 10px;
      margin-bottom: 20px;
      .left{
        width: 20%;
        background-color: white;
      }
      .right-big{
        width: 79%;
        display: block;
        margin-left: 1%;
      }
    }
</style>
